<template>
    <div class="tou">
        <div class="tou-container">
            <div class="tou-container-number">{{index>=9?Number(index+1):'0'+Number(index+1)}}</div>
            <div class="tou-container-img">
                <img :src="item.avatar" @click="gotoUse(item.uid)" alt="">
            </div>
            <div class="tou-container-title auto-text">{{item.name}}</div>
            <div class="tou-container-fans">
                <span  class="fans">{{item.fans | forNumber}}</span><span class="fanser">{{mount}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Titletou",
        props:{
            item:{
                type:Object,
                default:{}
            },
            index:{
                type:Number,String,
                default:''
            },
            mount:{
                type:String,
                default:''
            }
        },
        created(){
        },
        methods:{
            gotoUse(item){
                // 
                this.$router.push({name:"CartoonUser",query:{id:item}})
            }
        }
    }
</script>

<style lang="less" scoped>
.tou{
    margin-top: 10px;
}
.tou-container{
    display: flex;
    .tou-container-number{
        font-size: 20px;
        font-weight: bolder;
        color: #C88B5F;
    }
    .tou-container-img{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 10px;
        >img{
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .tou-container-title{
        flex: 1;
    }
    .tou-container-fans{
        margin-left: auto;
        padding-right: 10px;
        color: #9FA0A2;
        .fans{
            padding-right: 10px;
        }
    }
}
</style>